{% extends "base.html" %}


{% block content %}
    <div class="container-fluid" id="container_fluid">
        <div class="row">
            <div class="col-md-12">
                <div id="interactive" style="height: 250px;"></div>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <hr/>
        <div class="row">
            <div class="col-md-6">
                <div id="zhuzhuangtu" style="height: 250px;"></div>
            </div>
            <!-- /.col -->
            <div class="col-md-6">
                <div id="meiguitu" style="height: 250px;"></div>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div><!--/. container-fluid -->
{% endblock %}


{% block script %}
    <script>
        let vm_container_fluid = new Vue({
            el: "#container_fluid",
            data: {
                real_time: 0,  // 1 -> 打开实时刷新数据
                updateInterval: 500,

                teaPriceArr: [],
                teaNameArr: [],
                from_0_to_10: [],
                from_11_to_20: [],
                from_20_to_more: [],

                option: {
                    title: {
                        text: '各种奶茶价格差距对比'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['奶茶']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: this.teaNameArr
                            {#data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40']#}
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '奶茶',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.teaPriceArr
                            {#data: [120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 90, 230, 210]#}
                        },
                    ]
                },
                option_zhuzhuangtu: {
                    xAxis: {
                        type: 'category',
                        data: ['0-10元', '10-20元', '20元以上']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [
                                {
                                    value: 120,
                                    itemStyle: {
                                        color: '#12ED93'
                                    }
                                },
                                {
                                    value: 80,
                                    itemStyle: {
                                        color: '#3F77FE'
                                    }
                                },
                                {
                                    value: 200,
                                    itemStyle: {
                                        color: '#d223e7'
                                    }
                                }
                            ],
                            type: 'bar'
                        }
                    ]
                },
                option_meiguitu: {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 1048, name: '0-50元'},
                                {value: 735, name: '50-100元'},
                                {value: 580, name: '100元以上'},
                            ]
                        }
                    ]
                },
                tableDataTeaData: []
            },
            mounted() {
                axios.get("/api/admin/all_tea_data").then((response) => {
                    this.tableDataTeaData = response["data"]
                    for (const item of response["data"]) {
                        if (item["name"].search(/奶茶/) === -1) {
                            continue
                        }
                        this.teaNameArr.push(item["name"])
                        this.teaPriceArr.push(Number(item["price"]))
                    }
                    this.option["xAxis"][0]["data"] = this.teaNameArr
                    this.option["series"][0]["data"] = this.teaPriceArr

                    // 折线图
                    const chartDom = document.getElementById('interactive')
                    const myChart = echarts.init(chartDom, 'dark')
                    this.option && myChart.setOption(this.option);
                    if (this.real_time === 1) {
                        this.update();
                    }

                    // 玫瑰图
                    for (const price of this.teaPriceArr) {
                        if (price <= 10) {
                            this.from_0_to_10.push(price)
                        } else if (price <= 20) {
                            this.from_11_to_20.push(price)
                        } else {
                            this.from_20_to_more.push(price)
                        }
                    }
                    this.option_meiguitu["series"][0]["data"] = [
                        {value: this.from_0_to_10.length, name: '0-10元'},
                        {value: this.from_11_to_20.length, name: '10-20元'},
                        {value: this.from_20_to_more.length, name: '20元以上'},
                    ]
                    const chartDom_meiguitu = document.getElementById('meiguitu')
                    const myChart_meiguitu = echarts.init(chartDom_meiguitu, 'dark')
                    this.option_meiguitu && myChart_meiguitu.setOption(this.option_meiguitu);
                    if (this.real_time === 1) {
                        this.update_meiguitu();
                    }

                    // 柱状图
                    this.option_zhuzhuangtu["series"][0]["data"] = [
                        {
                            value: this.from_0_to_10.length,
                            itemStyle: {
                                color: '#12ED93'
                            }
                        },
                        {
                            value: this.from_11_to_20.length,
                            itemStyle: {
                                color: '#3F77FE'
                            }
                        },
                        {
                            value: this.from_20_to_more.length,
                            itemStyle: {
                                color: '#d223e7'
                            }
                        }
                    ]
                    const chartDom_zhuzhuangtu = document.getElementById('zhuzhuangtu')
                    const myChart_zhuzhuangtu = echarts.init(chartDom_zhuzhuangtu, 'dark')
                    this.option_zhuzhuangtu && myChart_zhuzhuangtu.setOption(this.option_zhuzhuangtu);
                    if (this.real_time === 1) {
                        this.update_zhuzhuangtu();
                    }
                })
            },
            methods: {
                update: function () {
                    axios.get("/api/mask/get_interactive_data").then((res) => {
                        this.option.series = res.data.series;
                        this.option && this.myChart.setOption(this.option);
                        setTimeout(this.update, this.updateInterval)
                    })
                },
                update_meiguitu: function () {
                    axios.get("/api/mask/get_meiguitu_data").then((res) => {
                        this.option_meiguitu.series[0].data = res.data.data;
                        this.option_meiguitu && this.myChart_meiguitu.setOption(this.option_meiguitu);
                        setTimeout(this.update_meiguitu, this.updateInterval)
                    })
                },
                update_zhuzhuangtu: function () {
                    axios.get("/api/mask/get_zhuzhuangtu_data").then((res) => {
                        this.option_zhuzhuangtu.series = [
                            {
                                data: res.data.data,
                                type: 'bar'
                            }
                        ]
                        this.option_zhuzhuangtu && this.myChart_zhuzhuangtu.setOption(this.option_zhuzhuangtu);
                        setTimeout(this.update_zhuzhuangtu, this.updateInterval)
                    })
                }
            }
        });
    </script>
{% endblock %}
